<script>
import {mapState, mapGetters, mapMutations,mapActions} from "vuex";
  export default {
    name: 'MyCount',
    data() {
      return {
        selectNum: 1
      }
    },
    methods: {
      //借助mapMutations来生成方法,同时指定映射的模块名称
      ...mapMutations("countOption",{add:"ADD",subtraction:"SUBTRACTION"}),
      ...mapActions("countOption",{hasOdd:"hasOdd",waitSubtraction:"waitSubtraction"}),
    },
    computed:{
      //借助mapState来生成本身组件需要的计算属性,这种简写方式适合计算属性的函数名和获取变量的名称一致的情况 才能采用简写形式，同时指定映射的模块名称
      ...mapState("countOption",['sum','address','name']),
      //借助mapState来生成本身personOption组件需要的计算属性,这种简写方式适合计算属性的函数名和获取变量的名称一致的情况 才能采用简写形式，同时指定映射的模块名称
      ...mapState("personOption",['personList']),
      //借助mapGetters来生成本身的计算属性,这种简写方式适合计算属性的函数名和获取变量的名称一致的情况 才能采用简写形式
      ...mapGetters("countOption",['bigSum'])
    }
  }
</script>

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>当前求和放大10倍为:{{bigSum}}</h3>
    <h3>我在{{address}},当{{name}}</h3>
    <h2 style="color: red">person组件的人员列表的总人数为:{{personList.length}}</h2>
    <select v-model.number="selectNum">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add(selectNum)">+</button>
    <button @click="subtraction(selectNum)">-</button>
    <button @click="hasOdd(selectNum)">当前求和为奇数再加</button>
    <button @click="waitSubtraction(selectNum)">等一等在减</button>
  </div>
</template>

<style>
  button{
    margin-left: 5px;
  }
</style>